<template>
    <div class="all_page">
        <div class="header">
      <a-breadcrumb>
        <a-breadcrumb-item><a @click="navBack">返回上一页</a></a-breadcrumb-item>
        <a-breadcrumb-item>发布资源</a-breadcrumb-item>
      </a-breadcrumb>
    </div>
        <h1>名称</h1>
        <div class="row">
            <div class="col-sm-3 " v-for="(childrenItem, childrenIndex) of worksList">
                <div class="card my-3 card_box">
                    <div>
                        <img :src="childrenItem.img" class="card-img-top img-fluid" alt="..." />
                    </div>
                    <div class="card-body">
                        <h5 class="card-title">{{ childrenItem.title }}</h5>
                        <p class="card-text card_text">{{ childrenItem.text }}</p>
                        <!-- <a href="#" class="btn btn-primary" data-mdb-ripple-init>Go somewhere</a> -->
                    </div>
                    <div class="card-footer">
                        <small class="text-body-secondary">下载次数： 1000</small>
                    </div>
                </div>
            </div>

        </div>
    </div>
</template>

<script lang="ts" setup>
import { reactive, ref, h } from "vue";
import { useRouter } from "vue-router";
const worksList = reactive([
    {
        id: 1,
        img: "https://cdn.pixabay.com/photo/2018/08/14/13/23/ocean-3605547_640.jpg",
        title: "专辑1",
        text: "这是内容内容内容内容内容内容内容内容内容",
    },
    {
        id: 2,
        img: "https://cdn.pixabay.com/photo/2018/08/14/13/23/ocean-3605547_640.jpg",
        title: "专辑1",
        text: "这是内容内容内容内容内容内容内容内容内容",
    },
    {
        id: 3,
        img: "https://cdn.pixabay.com/photo/2018/08/14/13/23/ocean-3605547_640.jpg",
        title: "专辑1",
        text: "这是内容内容内容内容内容内容内容内容内容",
    },
    {
        id: 4,
        img: "https://cdn.pixabay.com/photo/2018/08/14/13/23/ocean-3605547_640.jpg",
        title: "专辑1",
        text: "这是内容内容内容内容内容内容内容内容内容",
    },
    {
        id: 5,
        img: "https://cdn.pixabay.com/photo/2018/08/14/13/23/ocean-3605547_640.jpg",
        title: "专辑1",
        text: "这是内容内容内容内容内容内容内容内容内容",
    },
    {
        id: 6,
        img: "https://cdn.pixabay.com/photo/2018/08/14/13/23/ocean-3605547_640.jpg",
        title: "专辑1",
        text: "这是内容内容内容内容内容内容内容内容内容",
    },
])
const router = useRouter();
const navBack = () => {
    router.go(-1);
};
</script>

<style lang="scss" scoped>
.all_page {
    max-width: 1200px;
    margin: 0 auto;

    .header {
    margin: 30px 0;
  }

}
</style>